<template>
  <div style="padding: 20px">
    <div class="header" style="border-bottom: 1px solid #e6ebf5; height: 70px">
      <el-row>
        <el-col :span="24">
          <span style="line-height: 70px">分类管理</span>
        </el-col>
      </el-row>
    </div>
    <el-button type="primary" style="margin-top: 20px" @click="add"
      >新增分类</el-button
    >
    <!-- 表格 -->
    <div class="table" style="margin-top: 20px">
      <el-table
        :data="list"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'items' }"
      >
        <el-table-column align="center" prop="name" label="分类名字" />
        <el-table-column align="center" prop="sort" label="排序" />
        <el-table-column align="center" prop="id" label="分类id" />
        <el-table-column align="center" prop="created_at" label="创建时间" />
        <el-table-column align="center" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleClick(scope.row)"
              size="medium "
              >编辑</el-button
            >
            <el-button
              style="color: red; margin: 0 16px"
              type="text"
              size="medium "
              @click="deleteThis(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增分类diglog -->
    <el-dialog
      @close="
        form = {
          name: '',
          pic_url: '',
          parent_id: '',
          parent_id: '',
          level: '',
          sort: '',
        }
      "
      :title="isEdit ? '编辑分类' : '新增分类'"
      :visible.sync="dialogFormVisible"
    >
      <el-form ref="elForm" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="分类名称" prop="name">
          <el-input style="width: 85%" v-model="form.name" />
        </el-form-item>
        <el-form-item label="分类图片" prop="pic_url">
          <el-input style="width: 85%" v-model="form.pic_url" />
        </el-form-item>
        <el-form-item label="父分类id" prop="parent_id">
          <el-input style="width: 85%" v-model="form.parent_id" />
        </el-form-item>
        <el-form-item label="分类层级" prop="level">
          <el-input style="width: 85%" v-model="form.level" />
        </el-form-item>
        <el-form-item label="分类排序" prop="sort">
          <el-input style="width: 85%" v-model="form.sort" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addThis">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { categoryLevel, categoryAdd, categoryDelete } from "@/api/category";
export default {
  name: "ProductCategory",
  data() {
    return {
      list: [], //表格数据
      form: {
        //diglog表单数据
        name: "",
        pic_url: "",
        parent_id: "",
        level: "",
        sort: "",
      },
      isEdit: false, //编辑还是添加
      dialogFormVisible: false,
      //校验规则
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "submit" },
        ],
        pic_url: [
          { required: true, message: "请输入分类图片", trigger: "submit" },
        ],
        parent_id: [
          { required: true, message: "请输入父分类名称", trigger: "submit" },
        ],
        level: [
          { required: true, message: "请输入分类层级", trigger: "submit" },
        ],
        sort: [
          { required: true, message: "请输入分类排序", trigger: "submit" },
        ],
      },
    };
  },
  methods: {
    add() {
      this.isEdit = false;
      this.dialogFormVisible = true;
    },
    //表单提交
    addThis() {
      this.$refs.elForm.validate(async (valid) => {
        if (valid) {
          await categoryAdd(this.form);
          this.$message({
            type: "success",
            message: "添加分级成功!",
          });
          this.getList();
          this.dialogFormVisible = false;
          this.form = {
            name: "", // 分类名称
            pic_url: "", // 图片
            parent_id: "", // 父级id
            level: "", // 层级
            sort: "", // 排序
          };
        }
      });
    },
    //获取数据列表
    async getList() {
      let { data } = await categoryLevel({ limit: 100, page: 1 });
      this.list = data.list;
    },
    //编辑的数据回溯
    handleClick(row) {
      this.isEdit = true;
      this.dialogFormVisible = true;
      //数据回溯
      this.form = {
        name: row.name,
        pic_url: row.pic_url,
        parent_id: row.parent_id,
        level: row.level,
        sort: row.sort,
      };
    },
    //删除分级
    deleteThis(row) {
      this.$confirm("此操作将永久删除该商品分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async() => {
          await categoryDelete({id:row.id})  
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新数据
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  async created() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
</style>